
pink = #E87475
subtle = rgba(black,0.2)

*
	box-sizing: border-box;

.of-hidden
	overflow hidden

.main-width
	center(mainWidth)

.large-width
	center(mainWidth+300)

.mid-width
	center(mainWidth - 200)

.huge
	font-size 100px

.default-padding
	padding 25px

.underline
	text-decoration underline

.uppercase
	text-transform uppercase
.small
	font-size 15px
	line-height 22px

.pt
	padding-top 20px

.capitalize
	text-transform capitalize

.pt-small
	padding-top 5px

.center
	text-align center

.inline
	display inline-block

.relative
	position: relative

.mr
	margin-right 20px

.code-container
	@extends .mid-width
	border-radius 3px
	background:#2C3E50;
	overflow-x:scroll;
	padding:20px;
	code
		color white


.wireframe
	// outline 1px dotted foreground
	// background superSubtle
	// outline 1px solid rgba(black,0.5)
	background rgba(black, 0.09)
	overflow hidden
	// background rgba(modal,0.3)
	p
		font-size 16px
		color subtle

.normal
	font-weight 300

.light
	font-weight light

.left-margin
	margin-left 20px

.left-border
	border-left 2px solid subtle

ul.inline-list
	padding 0
	text-decoration none
	li
		margin-left 20px
		display inline-block

.badge
	padding 10px 20px
	display: inline-block
	border 1px solid rgba(black,0.5)
	// box-shadow 0 0 2px 0.1px black
	.tiny
		font-size 11px


.shadow
	box-shadow 0 0 2px 0.1px black
	

ul
	font-size 22px
	font-family fontSans

		


div, section, aside, article, header
	&.modal
		background modal
		.modal
			// background white - modal
			background rgba(white,0.4)

.center-contents, .center-center
	align(b)
	// -webkit-transform translate(-50%, -50%)

section.narrow
	center(500px)

	p
		font-family 'Cardo'

section.super-narrow
	center(300px)

.high-block
	min-height 500px

.small-padding
	padding 5px

.left
	text-align left

.right
	text-align right

.subtle
	color subtle

.nolink
	&.subtle
		color subtle
	text-decoration none
	font-family fontSans
	&:hover
		color modal


.post
	max-width 100%
	padding 0 0 50px
	border-bottom 1px solid superSubtle
	text-align left

	h1,h2,h3, h4,h5
		text-align left
		center(mainWidth - 200)
		padding-left 35px
		padding-right 35px

	.modal-block
		h1,h2,h3,h4,h5
			text-align center

	h1
		color rgba(black, 0.7)
	h2
		color rgba(black, 0.6)
	h3
		color rgba(black, 0.5)

	p,.date
		center(mainWidth - 200)
		padding-left 30px

	p
		// padding-top 10px
		padding 0 30px 20px

	pre
		center(mainWidth - 300)
		

	img
		margin 20px auto 40px
		col(1)
		
	ol
		center(mainWidth - 200)	
		font-family avenir, arial
		color rgba(black, 0.7)
		font-size 20px

	ul
		center(mainWidth - 200)
		list-style-type: none

		li
			font-size 24px
			&:not(:first-child)
				margin-top 20px
			color rgba(black, 0.5)
			&:before
				content '—'
				padding-right 20px
				
			a
				color modal



.foreground
	color foreground

.inverted-foreground
	color invertedForeground

.white-table
	border-collapse collapse
	margin auto
	color white
	border 3px solid rgba(white,0.7)
	margin-bottom: 25px
	width 90%
	min-height 100px
	th
		font-size medium
		background rgba(white,0.2)
	td,th
		padding 5px 10px
		border 3px solid rgba(white,0.7)
		
	&.small
		td,th
			font-size 10px

.modal-block
	h1
		// font-size 60px
		color white
	h2
		// font-size 40px

	margin 100px auto
	// background modal
	padding 50px 20px
	border-top 2px solid rgba(black,0.1)
	border-bottom @border-top
	border-left none
	border-right none
	p
		// font-size 24px
		color rgba(black,0.5)
		font-family fontSans
		a
			color rgba(black, 0.6)
			text-decoration none
			&:hover
				text-decoration underline
				
.polyback
	background-image url('/res/bg/polygonbackground.svg')
	background-position right
	background-repeat no-repeat

.plankShiftBack
	background-image url('/res/bg/plankblend.svg')
	background-position left
	background-repeat no-repeat
	v(background-size, auto 100%)
	// v(background-size, cover)

.polyTopBack
	background-image url('/res/bg/topfullpolygon.svg')
	background-repeat no-repeat
	v(background-size, 100% auto)

.polyFullBack
	background-image url('/res/bg/fullpolygon.svg')
	background-repeat no-repeat
	v(background-size, cover)

.polyBottomBack
	background-image url('/res/bg/bottomsmallpolygon.svg')
	background-repeat no-repeat
	background-position bottom
	v(background-size, 100% auto)
	// v(background-size, cover)

.polyTopBackSmall
	background-image url('/res/bg/topsmallpolygon2.svg')
	background-repeat no-repeat
	background-position top
	v(background-size, 100% auto)
	// v(background-size, 100% auto)

.bg-block-medium
	height 240px
	width 100%

span.space
	col(1)
	height 200px

blockquote
	// col(2/3, offset:1/3)
	center(500px)
	p
		text-align center
		font-family 'Cardo', serif
		font-size 20px
		// font-style italic
		b, strong
			font-family fontSans

.align-right
	text-align right
	padding-right 20px

article, div, section
	p
		// font-size 20px

	&.unmodal
		text-align center

		// background subtle
		h1 a,h2,a
			color subtle
			margin 0
		h1 a
			// font-size 32px
			// line-height @font-size

		h2
			// font-size 24px

.absolute
	position: absolute

.absTopRight
	position: absolute
	top 0
	right 0

.absTopLeft
	position: absolute
	top 0
	left 0

.underlined
	border-bottom 2px dotted subtle

// .center-icon
	// display block
	// margin 30px auto

.bg
	&.blue
		background-color #74C3E2
	&.red
		background-color #bf6540
		p
			color rgba(black, 0.6)
	&.green
		background-color #1FB29C
		
	&.mint
		background-color #cbe5b2
	&.wine
		background-color #933133
	&.pink
		background-color pink
	&.black
		background-color black
	&.gray
		background-color rgba(black, 0.4)

	&.behind
		z-index -4

	&.cover
		position absolute
		top 0
		left 0
		min-width 100%
		min-height 100%


	&.overlay
		position absolute
		top 0
		left 0
		min-width 100%
		min-height 100%
		z-index -1
		background-size cover
		background-repeat no-repeat
		background-position center center
		opacity 0.4
		&.opaque
			opacity 1
		&.dim
			opacity 0.8
			

	&.green, &.pink, &.black, &.white-foreground
		p, h1, h2,a
			color white
		a
			text-decoration underline

.nm
	margin 0

.small-line
	margin 5px auto
	height 5px
	// width 400px
	max-width 100%
	background-color white

.np
	padding 0

.mb
	margin-bottom: 25px

.mb-large
	margin-bottom 50px

	
.mt
	margin-top: 20px

.mt-large
	margin-top 60px
	+mobile()
		margin-top 0px


.paragraph-width
	center(mainWidth - 200)

.tm
	margin-top 20px

.mt-none, no-mt
	margin-top 0

.margin-left-right
	margin-left 20px
	margin-right 20px

.ml
	margin-left: 35px
	
.pl
	padding-left: 35px
.pr
	padding-right: 35px

.p-lr
	padding-left 35px
	padding-right 35px

.p-lr-small
	padding-left 5px
	padding-right 5px

.padding
	padding 25px

.no-mb
	margin-bottom 0

.fat-padding
	padding 50px
.no-border
	border none

.no-border-top
	border-top none

.curve-divider, .curve-divider-bottom, .curve-divider-bottom-white, .curve-divider-white
	height 140px
	v(background-size, 100% auto)
	background-repeat no-repeat
	

.divider-container
	width 100%
	overflow hidden

.curve-divider
	margin-right -5px
	margin-bottom -1px
	background-image url('/res/bg/curvedivider.svg')
	background-position right bottom

.curve-divider-bottom
	margin-left -5px
	margin-top -1px
	background-image url('/res/bg/curvedividerbottom.svg')
	background-position left top

.curve-divider-bottom-white
	margin-bottom -1px
	margin-right -5px
	background-image url('/res/bg/curvedividertopwhite.svg')
	background-position bottom right

.curve-divider-white
	margin-left -6px
	margin-top -1px
	background-image url('/res/bg/curvedividerbottomwhite.svg')
	background-position top left

	p
		padding-top 20px
		font-size 28px
		+below(1100px)
			padding 0
			font-size 24px
		
		+below(600px)
			font-size 12px
			margin 0 0 0 10px



.background
	opacity 0.3
	position fixed
	top 0
	left 0
	width 100vw
	height 100vh
	// z-index -100
	background-size cover
	background-repeat no-repeat
	-webkit-animation fade-in-bg .7s
	&.texture
		background-size auto
		background-repeat repeat
		
		


@-webkit-keyframes fade-in-bg {
	0% {
		opacity:0;
	}
	100% {
		opacity:.3;
	}
}

.full-chart
	center(1000px)

.bold
	font-weight bold

.pt-large
	padding-top 80px

.pb-large
	padding-bottom 80px

.large
	font-size 40px
	line-height @font-size*1.1

.mb-none
	margin-bottom 0
	
.subscribe-form
	text-align right
	font-family avenir, arial

	h1
		text-align right
		padding-right 0
	input[type="email"]
		margin-top 10px
		font-family avenir, arial
		border 2px solid rgba(black,0.6)
		font-size 30px
		padding 10px 15px
		border-radius 4px
	input[type=submit]
		margin-top 10px
		font-family avenir, arial
		font-weight bold
		margin-top 10px
		border-radius 4px
		background pink
		color white
		border 2px solid rgba(black, 0.2)
		font-size 20px
		padding 10px 20px
		cursor: pointer

.pink
	color pink
	
.border-list
	border-bottom 1px solid rgba(0,0,0,0.2)
	padding-bottom 30px
	&:last-child
		border-bottom 0
	
